<template>
	<view class="page-nav-statu-bar">
		<!--状态栏-->
		<view class="statu-bar" :style="{height:statu_bar_h + 'px',background:statu_bar_bg}"></view>
		<!--标题栏-->
		<template v-if="type === 'address'">
			<view class="nav-bar-box" :style="{height:nav_bar_h + 'px',background:nav_bar_bg}">
				<!--地图-->
				<view class="nav-bar-box-l" @click="tocity">
					<!-- <uni-icons :color="fontc" type="location-filled" style="margin-left: 30rpx;" size="20"></uni-icons> -->
					<image class="icon_img" :src="icon_img"></image>
					<view class="" :style="{color:fontc}">城市：{{city}}</view>
				</view>
			</view>
		</template>
		<template v-else-if="type === 'goback'">
			<view class="nav-bar-box">
				<!--返回-->
				<view class="nav-bar-box-l">
					<!-- <uni-icons :color="fontc" type="location-filled" style="margin-left: 30rpx;" size="20"></uni-icons> -->
				</view>
				<view class="nav-bar-box-r">
					<!-- <uni-icons :color="fontc" type="location-filled" style="margin-left: 30rpx;" size="20"></uni-icons> -->
				</view>
			</view>
		</template>
		<template v-else>
			
		</template>
	</view>
</template>

<script>
import uniIcons from "../uni-icons/uni-icons.vue"; 
export default {
	name: 'w-nav-statu-bar',
	components: {
		uniIcons
	},
	props:{
		list:Array,
		type:{
			type: String,
			default: 'goback'
		},
		statu_bar_h:{
			type: String,
			default: '22'
		},
		statu_bar_bg:{
			type: String,
			default: '#f5f5f5'
		},
		nav_bar_h:{
			type: String,
			default: '41'
		},
		nav_bar_bg:{
			type: String,
			default: '#f5f5f5'
		},
		city:{
			type: String,
			default: '厦门'
		},
		fontc:{
			type: String,
			default: '#999'
		}
	},
	data() {
		return {
			icon_img:'/static/clockIn/icon-address.png'
		};
	},
	methods: {
		tocity(){
			this.$emit("tocity");
		}
	}
}
</script>

<style lang="scss" scoped>
	
	.page-nav-statu-bar{
		display: flex;
		flex-direction: column;
		position: sticky;
		top: 0;
		z-index: 99;
		.nav-bar-box{
			display: flex;
			align-items: center;
			.nav-bar-box-l{
				display: flex;
				align-items: center;
				width: calc(100% - 200rpx);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				margin-left: 30rpx;
				.icon_img{
					width: 21rpx;
					height: 29rpx;
					margin-right: 12rpx;
				}
			}
			
		}
	}

</style>
